<template>
  <div>
    <van-nav-bar title="" left-arrow @click-left="fan" />
    <div class="page-top">
      <ul>
        <li>
          <span>客户</span>
          <span>{{ arr.cusName }}</span>
        </li>
        <li>
          <span>商品</span>
          <span>{{ arr.prodName }}</span>
        </li>
        <li>
          <span>数量</span>
          <span>{{ arr.prodNum }}</span>
        </li>
        <li>
          <span>下单人</span>
          <span>{{ arr.orderUserName }}</span>
        </li>
        <li>
          <span>下单时间</span>
          <span>{{ arr.orderTime }}</span>
        </li>
      </ul>
    </div>
    <div class="page-bottom">
      <ul>
        <li>
          <span>收货人</span>
          <input type="text"  v-model="receiver" />
        </li>
        <li>
          <span>联系电话</span>
          <input type="text"  v-model="linkPhone" />
        </li>
        <li>
          <span>收货地址</span>
          <textarea rows="4" v-model="address"></textarea>
        </li>
        <li>
          <span>物流单号</span>
          <input type="text"  v-model="logisticsCode" />
        </li>
      </ul>
    </div>
    <button @click="queren">确认发货信息</button>
  </div>
</template>

<script>
import axios from "axios";
import { OallSend } from "../request/api";
export default {
  data() {
    return {
      //订单号
      serialNo:'',
      arr: [],
      //收货人
      receiver: "",
      //联系电话
      linkPhone: "",
      //收货地址
      address: "",
      //物流单号
      logisticsCode: "",
      token: "",
    };
  },
  methods: {
    fan() {
      this.$router.push("/shipment");
    },
    queren() {
      // console.log(this.address); 

      OallSend({
        //订单号
        "serialNo":this.serialNo,
        //收货人
        "receiver": this.receiver,
        //联系电话
        "linkPhone": this.linkPhone,
        //收货地址
        "address": this.address,
        //物流单号
        "logisticsCode": this.logisticsCode,
      }).then((res) => {
        // console.log(res.data.errCode);
        if(res.errCode==0){
          this.$router.push("/shipment");
          
        }
        //  console.log(res.errCode);
      });
      // console.log(this.serialNo);
    },
  },
  created() {
    this.token = localStorage.getItem("token");
    this.serialNo = this.$route.query.serialNo;
    axios
      .get("https://www.ahsj.link/nebula-api/order/v1/orderInfo/" + this.serialNo, {
        headers: {
          "x-auth-token": this.token,
        },
      })
      .then((res) => {
        this.arr = res.data.data;
      });
  },
};
</script>
 
<style lang = "less" scoped>
/deep/ .van-nav-bar__content {
  background: #003399;
  .van-icon {
    color: #fff;
  }
  /deep/ .van-nav-bar__title .van-ellipsis {
    color: #fff;
  }
}

.page-top {
  ul {
    background-color: #fff;
    margin: 10px 0;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 17px 10px;
      border-bottom: 1px solid #ccc;
      span:nth-of-type(1) {
        color: #333;
      }
    }
  }
}
.page-bottom {
  ul {
    background-color: #fff;
    li {
      display: flex;
      justify-content: space-between;
      padding: 10px 10px;
      line-height: 25px;
      input,
      textarea {
        background-color: #ececec;
        text-indent: 1em;
        border: 0;
        width: 70%;
        height: 30px;
      }
      textarea {
        height: 65px;
        resize: none;
      }
    }
  }
}
button {
  border: 0;
  background-color: #003399;
  width: 90%;
  height: 45px;
  margin: 50px 17px 0;
  border-radius: 60px;
  color: #fff;
}
</style>